<template>
	<!-- 收货-收货时间begin -->
	<div class="flex">
		<strong>收货时间</strong>
		<span>选择收货时间</span>
		<div class="changeDay">
			<div class="day" v-for="(item, index) in Day" :key="index">
				<i
					class="iconfont"
					:class="{ 'icon-dui': item.flag, 'icon-duigou': !item.flag }"
					@click="changeSelectCheck(item.flag, index)"
				></i>
				<span @click="changeSelectCheck(item.flag, index)">{{ item.day }}</span>
			</div>
		</div>
		<div class="changeTime">
			<div
				v-for="(item, index) in Time"
				:key="index"
				class="day_Time"
				:class="{ change_Day_Time: item.flag }"
				@click="chankeTimeColor(item.flag, index)"
			>
				<span>{{ item.times }}</span>
			</div>
		</div>
		<div class="changeDay" style="justify-content: center">2022-06-01 10:00</div>
	</div>
	<!-- 收货-收货时间begin -->
</template>

<script>
export default {
	name: 'ConfirmOrderTime',
	data() {
		return {
			Day: [
				{
					flag: true,
					day: '今天',
				},
				{
					day: '明天',
				},
				{
					day: '后天',
				},
			],
			Time: [
				{
					flag: true,
					times: '10:00',
				},
				{
					times: '12:00',
				},
				{
					times: '17:00',
				},
				{
					times: '19:00',
				},
			],
		};
	},
	methods: {
		/**
		 * @method 切换收货地址选项
		 * @param {Boolean} flag 是否选中
		 * @param {Number} index 索引
		 */
		changeSelectCheck(flag, index) {
			if (!this.Day[index].flag) {
				this.$set(this.Day[index], 'flag', false);
			} else {
				return;
			}
			this.Day[index].flag = !flag;

			// 将其他的flag置为false
			for (let i = 0; i < this.Day.length; i++) {
				if (i != index) {
					this.$set(this.Day[i], 'flag', false);
				}
			}
		},
		/**
		 * @method 切换时间选项
		 * @param {Boolean} flag 是否选中
		 * @param {Number} index 索引
		 */
		chankeTimeColor(flag, index) {
			if (!this.Time[index].flag) {
				this.$set(this.Time[index], 'flag', false);
			} else {
				return;
			}
			this.Time[index].flag = !flag;
			// 将其他的flag置为false
			for (let i = 0; i < this.Time.length; i++) {
				if (i != index) {
					this.$set(this.Time[i], 'flag', false);
				}
			}
		},
	},
};
</script>

<style scoped>
.flex {
	display: flex;
	flex-direction: column;
	height: auto;
	margin: 0 26px 12px 26px;
	padding: 15px 20px 16px 22px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
	border-radius: 12px;
}
strong {
	height: 25px;
	color: rgb(60, 69, 75);
	font-family: Noto Sans SC;
	font-size: 20px;
	font-weight: 500;
	line-height: 25px;
	letter-spacing: 0.25714290142059326px;
	text-align: left;
}
.flex span {
	height: 15px;
	margin-top: 10px;
	color: rgb(110, 124, 135);
	font-family: Noto Sans SC;
	font-size: 10px;
	font-weight: 400;
	line-height: 15px;
	letter-spacing: 0px;
	text-align: left;
}
.changeDay {
	display: flex;
	margin: 13px 0 0 0;
	padding: 0 0 13px 0;
	border-bottom: 1px solid rgb(229, 237, 242);
	line-height: 24px;
}
.day {
	margin: 0 29px 0 0;
	display: flex;
	align-items: center;
}
.day > i {
	font-size: 20px;
}
.day > i.icon-dui {
	color: #ffd719;
}
.day > span {
	color: rgb(78, 92, 103);
	font-family: Noto Sans SC;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0px;
	text-align: left;
	margin: 0 0 0 7px;
}
.changeTime {
	display: flex;
	height: auto;
	margin-top: 13px;
}
.changeTime > .day_Time {
	width: 61px;
	height: 28px;
	top: 213px;
	left: 193px;
	box-sizing: border-box;
	border: 1px solid rgb(221, 231, 244);
	border-radius: 4px;
	margin: 0 10px 0 0;
	text-align: center;
}
.changeTime > .day_Time > span {
	line-height: 28px;
}
.changeTime > .change_Day_Time {
	background: #ffd719;
	border: 1px solid rgb(255, 215, 25);
}
</style>
